<template>
  <el-drawer
    :title="isNew ? '新增' : '编辑'"
    v-model="drawerVisible"
    @close="closeDrawer"
    size="600px"
    class="drawer"
    append-to-body
  >
    <el-form ref="tenantFormRef" v-loading="isLoadDrawer" label-position="top" :model="tenantForm" label-width="80px">
      <el-form-item label="系统开通日期">
        <el-date-picker
          style="width: 100%"
          v-model="tenantForm.activeDate"
          value-format="YYYY-DD-HH hh:mm:ss"
          type="datetime"
          placeholder="系统开通日期"
        />
      </el-form-item>
      <el-form-item label="租户名称">
        <el-input v-model="tenantForm.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="tenantForm.contacts" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="tenantForm.mobile" placeholder="请输入联系电话" maxlength="11" />
      </el-form-item>
      <el-form-item label="所在省份">
        <el-input v-model="tenantForm.province" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="业务人员">
        <el-input v-model.trim="tenantForm.salesMan" placeholder="请输入业务人员" />
      </el-form-item>
      <el-form-item label="业务员电话">
        <el-input v-model.trim="tenantForm.salesMobile" placeholder="请输入业务员电话" />
      </el-form-item>
      <el-form-item label="租约到期日期">
        <el-date-picker
          style="width: 100%"
          value-format="YYYY-DD-HH hh:mm:ss"
          v-model="tenantForm.cutoff"
          type="datetime"
          placeholder="租约到期日期"
        />
      </el-form-item>
      <el-form-item label="其他备注信息">
        <el-input type="textarea" autosize v-model="tenantForm.remark" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn" type="primary" :disabled="isLoadDrawer" @click="handelSubmit">确 定</el-button>
        <el-button class="btn" @click="closeDrawer">取 消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { initForm } from "@/views/tenantList/config.js";
import { tenantDAddOrUpdate, tenantDDetail } from "@/api/tenantList/index.js";

const { proxy } = getCurrentInstance();
const props = defineProps({
  isNew: {
    type: Boolean,
    default: true
  },
  modeValue: Boolean,
  tenantId: {
    type: String,
    default: ""
  }
});
const emit = defineEmits(["update:modeValue", "closeDrawer", "submit"]);

const drawerVisible = computed({
  get() {
    return props.modeValue;
  },
  set(val) {
    emit("update:modeValue", val);
  }
});

const isLoadDrawer = ref(false);
const tenantForm = ref({ ...initForm });
const handelSubmit = async () => {
  try {
    isLoadDrawer.value = true;
    await tenantDAddOrUpdate(tenantForm.value);
    isLoadDrawer.value = false;
    proxy.$modal.msgSuccess("新增成功");
    closeDrawer();
    emit("submit");
  } catch (err) {
    console.log("tenantDAddOrUpdate>>>>>", err);
    isLoadDrawer.value = false;
  }
};
const closeDrawer = () => {
  drawerVisible.value = false;
  tenantForm.value = { ...initForm };
  emit("closeDrawer");
};

const getDetail = async () => {
  try {
    isLoadDrawer.value = true;
    const { data } = await tenantDDetail(props.tenantId);
    tenantForm.value = data ?? { ...initForm };
    isLoadDrawer.value = false;
  } catch (err) {
    console.log("tenantDDetail>>>>>", err);
    isLoadDrawer.value = false;
  }
};
!props.isNew && props.tenantId && getDetail();
</script>

<style scoped lang="scss"></style>
